<template>
  <div class="bg-white">
    <div class="w m-auto pt-[0px] pb-[60px] flex gap-[16px] relative">
      <div class="w-[288px] sticky pt-[20px] top-[86px] h-fit">
        <div class="text-[18px] font-[500]">
          {{ $t("title.个人中心") }}
        </div>
        <div class="menu">
          <div
            :class="path == item.path ? 'active' : ''"
            v-for="(item, i) in menuOptions"
            :key="i"
            @click="onClickMenu(item)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="flex-1 w-0 min-h-[600px]">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const menuOptions = [
  {
    title: "Mis direcciones",
    path: "/uc/address",
  },
  {
    title: "Mis pedidos",
    path: "/uc/orderList",
  },
  // {
  //   title: "Servicio postventa",
  //   path: "",
  // },
  {
    title: "Centro de ayuda",
    // path: "/artical/content/",
    path: "/uc/helpCenter/",
    blank: true,
  },
];
const router = useRouter();
const route = useRoute();
const path = ref(route.path);
watch(
  () => route.path,
  (val) => {
    path.value = val;
  },
  { immediate: true }
);
const onClickMenu = (item) => {
  if (item.blank) {
    window.open(`/#${item.path}`, "_blank");
  } else {
    router.push(item.path);
  }
};
</script>

<style lang="scss" scoped>
.menu {
  > div {
    margin: 10px 0;
    color: #3d3d3d;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    cursor: pointer;
    padding-left: 14px;
    transition: all 0.1s ease-in-out;
    border-left: 4px solid transparent;
    &:hover {
      color: var(--main-color);
    }
    &.active {
      border-left: 4px solid var(--main-color);
      color: var(--main-color);
    }
  }
}
</style>
